<template>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="uname" />
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model.number="age" />
        </div>
        <div>
            <span>性别:</span>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="addFn">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item, ind) in list" :key="item.id">
                    <td>{{ ind + 1 }}</td>
                    <td>{{ item.uname }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>
                        <button @click="delFn(item.id)">删除</button>
                        <button @click="changeFn(item)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [{ uname: 'harry', age: 17, sex: '男', id: 1 }],
            uname: '',
            age: 0,
            sex: '',
            getSel: false,
            num: 0,
        }
    },
    methods: {
        addFn() {
            if (this.uname.trim() === '' || this.age === 0 || this.sex === '') return
            if (!this.getSel) {
                this.list.push({
                    uname: this.uname.trim(),
                    age: this.age,
                    sex: this.sex,
                    id: this.list ? this.list.at(-1).id + 1 : 1,
                })
            } else {
                const i = this.list.findIndex((item) => item.id === this.num)
                this.list[i] = {
                    uname: this.uname.trim(),
                    age: this.age,
                    sex: this.sex,
                }
            }
            this.num = 0
            this.uname = ''
            this.sex = ''
            this.age = 0
            this.getSel = false
        },
        changeFn(item) {
            this.uname = item.uname
            this.sex = item.sex
            this.age = item.age
            this.getSel = true
            this.num = item.id
        },
        delFn(id) {
            this.list = this.list.filter((item) => item.id !== id)
        },
    },
}
</script>
<style>
table {
    width: 400px;
    height: 80px;
    text-align: center;
}
table th {
    text-align: center;
}
</style>
